<template>
  <div>
    <div class="datadir">
      <div class="datadir-commonly">
        <div class="datadir-commonly-header">
          <el-image :src="require('@/assets/index/fill.png')" />
          <div class="title">常用功能</div>
          <!--<div class="custom">自定义</div>-->
        </div>
        <div class="datadir-commonly-grid">
          <div v-for="(item, index) in commonlyList" :key="index" v-auth="item.permission" class="item">
            <el-image class="img" :src="item.icon" @click="gotoUri(item.uri)" />
            <div class="title">{{ item.title }}</div>
          </div>
        </div>
      </div>
      <el-row :gutter="32">
        <el-col v-loading="loading" :span="12">
          <div class="datadir-son">
            <div class="datadir-son-header">
              <el-image :src="todayIcon" />
              <div class="title">今日新增</div>
              <div class="time">更新时间：{{ updateTime }}</div>
              <el-link :underline="false" type="primary" class="more" @click="gotoDataSurvey">
                查看更多
                <i class="el-icon-arrow-right" />
              </el-link>
            </div>
            <div class="datadir-son-chart">
              <div v-for="(item, j) in todayDatas" :key="j" class="nub">
                <div class="text">{{ item.title }}</div>
                <div class="total"><count-roll :number="item.today" :is-money="!!item.is_money" /></div>
                <div class="sales">
                  昨日：
                  <count-roll :number="item.yesterday" />
                </div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col v-loading="loading" :span="12">
          <div class="datadir-son">
            <div class="datadir-son-header">
              <el-image :src="totalIcon" />
              <div class="title">累计数据</div>
              <div class="time">更新时间：{{ updateTime }}</div>
              <el-link :underline="false" type="primary" class="more" @click="gotoDataSurvey">
                查看更多
                <i class="el-icon-arrow-right" />
              </el-link>
            </div>
            <div class="datadir-son-chart">
              <div v-for="(item, j) in totalDatas" :key="j" class="nub">
                <div class="text">{{ item.title }}</div>
                <div class="total"><count-roll :number="item.total" /></div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
      <div class="statistics-row"><visit /></div>
    </div>
  </div>
</template>

<script>
import CountRoll from '@/pages/data/components/count_roll';
import Visit from '@/pages/vcharts/card/website/visit';
export default {
  components: {
    CountRoll,
    Visit
  },
  data() {
    return {
      loading: true,
      todayIcon: require('@/assets/index/new.png'),
      totalIcon: require('@/assets/index/stat.png'),
      commonlyList: [
        {
          icon: require('@/assets/index/dianbo_icon.png'),
          title: '点播',
          permission: 'course.video.default.list',
          uri: '/course/video/list'
        },
        {
          icon: require('@/assets/index/live_icon.png'),
          title: '直播',
          permission: 'course.live.large.list',
          uri: '/course/live/list'
        },
        {
          icon: require('@/assets/index/class_icon.png'),
          title: '班级',
          permission: 'course.classes.default.list',
          uri: '/course/classes/list'
        },
        {
          icon: require('@/assets/index/user_icon.png'),
          title: '用户',
          permission: 'user.student.list',
          uri: '/user/student'
        },
        {
          icon: require('@/assets/index/exam_icon.png'),
          title: '考试',
          permission: 'exam.paper.list',
          uri: '/exam/paper/list'
        },
        {
          icon: require('@/assets/index/data_icon.png'),
          title: '数据',
          permission: 'data.survey',
          uri: '/data/survey'
        }
      ],
      totalDatas: [],
      todayDatas: [],
      updateTime: ''
    };
  },
  created() {
    this.$http.get(
      '/admin/survey',
      {},
      response => {
        const { today, total, update_time: updateTime } = response.data;

        this.todayDatas = today;
        this.totalDatas = total;
        this.updateTime = updateTime;
        this.loading = false;
      },
      () => {},
      false
    );
  },
  mounted() {
    this.$store.dispatch('setLoading', 0);
  },
  methods: {
    // 统计首页
    gotoDataSurvey() {
      this.$router.push({ path: '/data/survey' });
    },
    // 跳转路由
    gotoUri(uri) {
      this.$router.push({ path: uri });
    }
  }
};
</script>
<style lang="scss" scoped>
.datadir {
  min-height: calc(100vh - 68px);
  padding-right: 27px;
  background-color: #f8f8f8;
  .datadir-son {
    background: #ffffff;
    box-shadow: 0px 2px 14px 0px rgba(0, 0, 0, 0.06);
    border-radius: 6px;
    .datadir-son-header {
      height: 56px;
      display: flex;
      align-items: center;
      padding: 0 25px;
      border-bottom: 1px solid #ebeef5;
      .title {
        margin-left: 10px;
        font-size: 16px;
        font-family: SourceHanSansCN-Medium, SourceHanSansCN;
        font-weight: 500;
        color: #303133;
      }
      .time {
        margin-left: 10px;
        font-size: 12px;
        font-family: SourceHanSansCN-Normal, SourceHanSansCN;
        font-weight: 400;
        color: #909399;
      }
      .more {
        margin-left: auto;
      }
    }
    .datadir-son-chart {
      height: 320px;
      padding: 0 50px;
      display: grid;
      grid-template-columns: repeat(4, 25%);
      grid-template-rows: repeat(2, 50%);
      box-sizing: border-box;
      .nub {
        padding-top: 30px;
        box-sizing: border-box;
      }
      .text {
        font-size: 14px;
        font-family: SourceHanSansCN-Normal, SourceHanSansCN;
        font-weight: 400;
        color: #909399;
      }
      .total {
        margin-top: 25px;
        font-size: 22px;
        font-family: SanFranciscoText-Bold, SanFranciscoText;
        font-weight: bold;
        color: #303133;
      }
      .sales {
        margin-top: 12px;
        font-size: 13px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #909399;
      }
    }
  }
  .datadir-commonly {
    margin-bottom: 32px;
    background: #ffffff;
    box-shadow: 0px 2px 14px 0px rgba(0, 0, 0, 0.06);
    border-radius: 6px;
    .datadir-commonly-header {
      height: 56px;
      display: flex;
      align-items: center;
      padding: 0 25px;
      border-bottom: 1px solid #ebeef5;
      .title {
        margin-left: 10px;
        font-size: 16px;
        font-family: SourceHanSansCN-Medium, SourceHanSansCN;
        font-weight: 500;
        color: #303133;
      }
      .custom {
        margin-left: 10px;
        font-size: 12px;
        font-family: SourceHanSansCN-Normal, SourceHanSansCN;
        font-weight: 400;
        color: #5191ff;
      }
    }
    .datadir-commonly-grid {
      padding: 0 10px;
      display: grid;
      grid-template-columns: repeat(12, minmax(80px, 1fr));
      box-sizing: border-box;
      .item {
        height: 130px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .img {
          width: 54px;
          height: 54px;
          cursor: pointer;
        }
        .title {
          margin-top: 10px;
          font-size: 14px;
          font-family: SourceHanSansCN-Normal, SourceHanSansCN;
          font-weight: 400;
          color: #303133;
        }
      }
    }
  }
}
.statistics-row {
  margin-top: 32px;
}
.reminder {
  height: 48px;
  padding: 0 22px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  background: linear-gradient(270deg, #ff695c 0%, #f54030 100%);
  border-radius: 6px;
  p {
    font-size: 14px;
    font-weight: 400;
    color: #ffffff;
    margin-right: 20px;
  }
  .btn {
    width: 78px;
    height: 30px;
    font-size: 14px;
    font-weight: 400;
    color: #f54030;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
    background: #ffffff;
    border-radius: 4px;
  }
}
</style>
